<template>
  <transition name="fade">
    <div class="sexSelect">
      <div class="sexSelect-main" @click="divClick($event)" v-show="showSex">
        <ul>
          <li class="input-box flex-box">
            <div><p> 男</p><input name="sex" type="radio" @click="slectSex('男')"></div>
          </li>
          <li class="input-box flex-box">
            <div><p> 女</p><input name="sex" type="radio" @click="slectSex('女')"></div>
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>
<script>
// @ is an alias to /src

export default {
  data() {
    return {
      list: "",
      choosenSex: ""
    };
  },
  name: "needs",
  props: ["showSex"],
  computed: {},
  methods: {
    clotheTanchuang() {
      this.$emit("tcClothe");
    },
    divClick(e) {
      e.stopPropagation();
    },
    slectSex(v) {
      this.choosenSex = v;
      this.$emit("tcClothe", this.choosenSex);
    }
  },
  mounted() {
    let self = this;
    document.onclick = function() {
      self.clotheTanchuang();
    };
  }
};
</script>
<style lang="scss" scoped>
.sexSelect {
  width: 100%;
  height: 150vh;
  position: fixed;
  top: -50vh;
  left: 0;
  z-index: 999;
  z-index: 6666;
  background: rgba($color: #000000, $alpha: 0.7);
  .sexSelect-main {
    width: 100%;
    height: r(136);
    position: absolute;
    bottom: r(-4);
    background: #fff;
    ul {
      display: block;
      padding-bottom: 0;
      border: 0;
      padding-left: r(15);
      padding-right: r(15);
      li {
        input[type="radio"] {
          width: 24px;
        }
        &:last-child {
          border: none;
        }
      }
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: 0.25s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: translateY(100px);
}
</style>
